<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="填写预约信息"></c-nav-bar>
		<view class="map">
			<map id="yyMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<view class="park_info">
			<text>{{item.place}}-{{item.parkName}}</text>
			<view class="pi_input">
				<view class="hander-car" v-if="!isedit">
					<car-number-input @numberInputResult="numberInputResult"></car-number-input>
				</view>
				<view class="pii_no" v-else>
					{{licenceNo}}
				</view>
			</view>
			<view class="pi_colors" v-if="!isedit">
				<text>请选择车牌颜色</text>
				<view class="items">
					<view v-for="(item,index) in carcolors" :key="index" :class="yindex===index?'active':''" @tap="selectCarColor(item,index)">
						{{item}}
						<view class="gbg" v-if="yindex===index">
							<image class="g_bg" src="@/static/index/steamerTicket/icon_gbg.png"></image>
							<image class="g_gou" src="@/static/index/steamerTicket/icon_gou.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="park_items">
			<view class="pi_item">
				<view class="pii_left">预约入场时间</view>
				<view class="pii_right" @tap="inShow=true">
					<text>{{inTime}}</text>
					<image src="@/static/my/commonInformation/icon_yjt.png"></image>
				</view>
			</view>
			<view class="pi_item">
				<view class="pii_left">预约离场时间</view>
				<view class="pii_right" @tap="outShow=true">
					<text>{{outTime}}</text>
					<image src="@/static/my/commonInformation/icon_yjt.png"></image>
				</view>
			</view>
			<view class="pi_item">
				<view class="pii_left">预约停车时长</view>
				<view class="pii_right">
					<text>{{parkHours}}</text>
				</view>
			</view>
			<view class="pi_item">
				<view class="pii_left">手机号码</view>
				<view class="pii_right">
					<input type="tel" placeholder="请输入手机号" v-model="phone" @blur="setPhone" @confirm="setPhone">
				</view>
			</view>
		</view>
		<view class="park_rules">
			<view class="pr_title">预约规则</view>
			<view class="pr_content">
				<view>1.预约景区停车位的车辆可走预约车辆通道，享优先进场权，但部分时段景区停车位紧张，可能需要排队等候入场;</view>
				<view>2.请在预约入场时间到达预约停车场，提前延后不超过2个小时，预约车位仅当天当次有效；</view>
				<view>3.如您的行程有变，可以在下单一小时内取消预约， 避免违约违约3次将取消本年度所有预约活动的预约资格;</view>
				<view>4.如有问题，请联系客服，咨询热线: 4007005305</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @tap="toAppointment">立即预约</view>
		</view>
		<u-datetime-picker @close="inShow=false" @cancel="inShow=false" @confirm="inConfirm"
			:show="inShow"
			v-model="inDate"
			mode="datetime"
			:itemHeight="68"
		></u-datetime-picker>
		<u-datetime-picker @close="outShow=false" @cancel="outShow=false" @confirm="outConfirm"
			:show="outShow"
			v-model="outDate"
			mode="datetime"
			:itemHeight="68"
		></u-datetime-picker>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				item:null,
				licenceNo:'',
				yindex:'',
				plateType:'',
				carcolors:['蓝牌','黄牌','绿牌','黄绿牌','黑牌','白牌'],
				inTime:'',
				outTime:'',
				parkHours:'',
				phone:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).mobile:'',
				inShow:false,
				outShow:false,
				inDate:'',
				outDate:'',
				isedit:false,
				latitude:'',
				longitude:'',
				covers:[],
			}
		},
		onLoad(option) {
			if(option.item) this.item = JSON.parse(option.item);
			this.inTime = new Date().Format('yyyy-MM-dd hh:mm');
			this.outTime = new Date(new Date().setHours(new Date().getHours()+1)).Format('yyyy-MM-dd hh:mm');
			this.parkHours = '1小时';
			this.inDate = new Date(this.inTime);
			this.outDate = new Date(this.outTime);
			//更改
			if(option.editInfo){
				this.isedit = true;
				this.item = JSON.parse(decodeURIComponent(option.editInfo));
				this.item.place = this.item.nameIsland;
				this.item.parkName = this.item.parkadeName;
				this.licenceNo = this.item.numberplate;
				this.inTime = new Date(this.item.createOrderTime).Format('yyyy-MM-dd hh:mm');
				this.outTime = new Date(this.item.paymentTime).Format('yyyy-MM-dd hh:mm');
				this.inDate = new Date(this.item.createOrderTime);
				this.outDate = new Date(this.item.paymentTime);
				this.phone = this.item.phone;
			}
			
			this.latitude = this.item.latitude;
			this.longitude = this.item.longitude;
			this.covers.push({
				latitude: this.latitude,
				longitude: this.longitude,
				iconPath: 'https://fsy.shengsi.gov.cn/file/20240906/f69da85565434e51849827d256efcadd.png',
				width: 20,
				height: 30
			});
		},
		methods: {
			numberInputResult(e) {
				this.licenceNo = e;
			},
			selectCarColor(item,index){
				this.yindex = index;
				this.plateType = item;
			},
			setPhone(e){
				this.phone = e.detail.value;
			},
			inConfirm(e){
				if(Date.parse(new Date(e.value))-Date.parse(new Date(this.outTime))>0) return this.$showToast('入场时间不能大于离场时间');
				this.inTime = new Date(e.value).Format('yyyy-MM-dd hh:mm');
				this.inDate = new Date(e.value);
				this.parkHours = Math.ceil((Date.parse(new Date(this.outTime+':00'))-Date.parse(new Date(this.inDate)))/1000/60/60)+'小时';
				this.inShow = false;
			},
			outConfirm(e){
				if(Date.parse(new Date(e.value))-Date.parse(new Date(this.inTime))<0) return this.$showToast('离场时间不能小于入场时间');
				this.outTime = new Date(e.value).Format('yyyy-MM-dd hh:mm');
				this.outDate = new Date(e.value);
				this.parkHours = Math.ceil((Date.parse(new Date(this.outDate))-Date.parse(new Date(this.inTime+':00')))/1000/60/60)+'小时';
				this.outShow = false;
			},
			toAppointment(){
				if(!this.$reg.carNo(this.licenceNo)) return this.$showToast('请输入正确的车牌号');
				if(this.yindex===''&&!this.isedit) return this.$showToast('请选择车牌颜色');
				if(!/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(this.phone)) return this.$showToast('请输入正确的手机号');
				
				this.$login().then(res => {
					if (res === 0) {
						if(this.isedit){
							let params = {
								orderCode:this.item.orderCode,
								reservationEnter:this.inTime+':00',
								reservationLeave:this.outTime+':00'
							}
							this.$api.post('/travel/wisdom/MyReservation/upadteTime',params).then(res=>{
								if(res.data.code===0){
									this.$showToast('更改成功');
									setTimeout(()=>{
										uni.navigateBack();
									},1500)
								}else this.$showModal(res.data.msg);
							})
						}else{
							this.$api.post('/travel/wisdom/parkadeReservation/write?openId='+JSON.parse(uni.getStorageSync('userInfo')).openId+'&parkadeName='+this.item.parkName,{
								"numberplate": this.licenceNo,
								"reservationEnter": this.inTime+':00',
								"reservationLeave": this.outTime+':00',
								"reservationPhone": this.phone,
								"numberplateColour": this.yindex+1
							}).then(res=>{
								if(res.data.code===0){
									uni.navigateTo({
										url:'/pagesIndex/parkingService/confirmOrder?item='+JSON.stringify({
											from:this.item.place,
											park:this.item.parkName,
											address:this.item.address,
											inTime:res.data.data.reservationEnter,
											outTime:res.data.data.reservationLeave,
											licence:this.licenceNo,
											phone:res.data.data.reservationPhone,
											price:res.data.data.estimatedCosts,
											serviceFee:res.data.data.appointmentServicefee,
											orderCode:res.data.data.orderCode
										})
									})
								}else this.$showModal(res.data.msg)
							})
						}
					}else {
						this.$refs['phoneNumber'].show = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.car-input-container {
		padding: 20rpx 5rpx 0 !important;
		margin: 20rpx 0 0 !important;
	}
	/deep/.car-input-box{
		width: calc(12.5% - 8rpx) !important;
		position: relative;
		&:nth-child(2){
			margin-right: 48rpx;
			&::after{
				content: '';
				width: 6rpx;
				height: 6rpx;
				background: #111111;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				margin-top: -3rpx;
				right: -26.5rpx;
			}
		}
	}
	/deep/.car-input-item{
		background: #FFFFFF;
		border: 2rpx solid #007A69;
	}
	
	.page{
		padding-bottom: 200rpx;
		background: #F5F8FA;
		.map{
			width: 100%;
			height: 341rpx;
		}
		
		.park_info{
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 4rpx 4rpx;
			margin-top: -24rpx;
			padding: 44rpx 24rpx 40rpx;
			&>text{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.pi_input{
				margin-top: 30rpx;
				.hander-car {
					width: 100%;
					background: #F3F4F6;
					padding: 18rpx 0;
				}
				.pii_no{
					width: 100%;
					text-align: center;
					padding: 18rpx 0;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
				}
			}
			.pi_colors{
				margin-top: 30rpx;
				&>text{
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.items{
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-top: 30rpx;
					&>view{
						width: calc(100% / 6 - 12rpx);
						height: 54rpx;
						background: #F3F4F6;
						border-radius: 8rpx;
						line-height: 54rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 12rpx;
						position: relative;
						
						&:first-child{
							margin-left: 0;
						}
						
						.gbg{
							width: 22rpx;
							height: 16rpx;
							background: #FFFFFF;
							border-radius: 8rpx 0rpx 8rpx 0rpx;
							position: absolute;
							right: 0;
							bottom: 0;
							image{
								position: absolute;
							}
							.g_bg{
								z-index: 1;
								width: 100%;
								height: 100%;
							}
							.g_gou{
								z-index: 2;
								width: 9rpx;
								height: 6rpx;
								left: 50%;
								margin-left: -4.5rpx;
								top: 50%;
								margin-top: -3rpx;
							}
						}
						
						&.active{
							background: #007A69;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		
		.park_items{
			margin-top: 20rpx;
			background: #fff;
			.pi_item{
				width: calc(100% - 48rpx);
				border-bottom: 1rpx solid #F5F8FA;
				padding: 30rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.pii_left{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.pii_right{
					display: flex;
					align-items: center;
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					image{
						width: 30rpx;
						height: 20rpx;
						margin-left: 14rpx;
					}
					.review{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #007A69;
					}
					input{
						outline: none;
						border: none;
						text-align: right;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						&::placeholder{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
						}
					}
				}
				&:last-child{
					border-bottom: none;
				}
			}
		}
		
		.park_rules{
			background: transparent;
			width: 100%;
			padding: 40rpx 24rpx 30rpx;
			box-sizing: border-box;
			.pr_title{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.pr_content{
				margin-top: 16rpx;
				&>view{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 49rpx;
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 4rpx rgba(0,0,0,0.06);
			position: fixed;
			bottom: 0;
			z-index: 2;
			.btn{
				width: calc(100% - 60rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 50rpx;
				margin: 39rpx 30rpx 0;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
	}
</style>